import { Tabs, Button, Modal, Tree, Space, Radio } from 'antd';
import React, { useState, useEffect } from 'react';
import { ApartmentOutlined, DownOutlined } from '@ant-design/icons';
import instance from '../axios/request';

function SelectBumen(props) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
    setBumen(curcheck);
    props.bumen(curcheck);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const initData = () => {
    instance.get('/Department/list').then((data) => {
      const treeData = [];
      treeData.push({
        title: "所有部门",
        key: "0-0",
        children: []
      })
      treeData[0].children = data.data.data.map(item => {
        return {
          title: item.name,
          key: item.id,
        }
      })
      setTreeData(treeData);
    }).catch(e => {

    })
  }
  useEffect(() => {
    initData();
  }, [])

  const [treeData, setTreeData] = useState([
    {
      title: '帆软软件公司',
      key: '0-0',
      children: [
        {
          title: '市场部',
          key: '0-0-0',

        },
        {
          title: '采购部',
          key: '0-0-1',

        },
        {
          title: '生产部',
          key: '0-0-2',
        },
        {
          title: '人事部',
          key: '0-0-3',

        },
        {
          title: '销售部',
          key: '0-0-4',

        },
        {
          title: '研发部',
          key: '0-0-5',

        },
        {
          title: '测试部',
          key: '0-0-6',
        },
        {
          title: '产品部',
          key: '0-0-7',
        },
        {
          title: '后端',
          key: '0-0-8',
        },
        {
          title: '前端',
          key: '0-0-9',
        },
        {
          title: '文档',
          key: '0-0-10',
        },
        {
          title: '视觉',
          key: '0-0-11',
        },
        {
          title: '交互',
          key: '0-0-12',
        },
        {
          title: '质量部',
          key: '0-0-13',
        },
        {
          title: '杭州大区',
          key: '0-0-14',
        },
        {
          title: '行政部',
          key: '0-0-15',
        },
        {
          title: '安全部',
          key: '0-0-16',
        },
      ],
    },
  ]);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [checkedKeys, setCheckedKeys] = useState([]);
  // 一级分类 父节点
  const [curParentKey, setCurParentKey] = useState('')
  // 用于判断是否是从选中父子节点(父下只有一个子的情况)到只有子节点的过程
  let [isSelectParent, setIsSelectParent] = useState(false);
  const [curbumen, setBumen] = useState('选择部门');
  const [curcheck, setCheck] = useState('');
  const onCheck = (key, e) => {
    // 情况一：取消选中
    if (!key.length) return
    // 情况二：子只有一级，选中子，父也被选中了
    if ((key.length > 2 && !isSelectParent) || !e.halfCheckedKeys.length) {
      setIsSelectParent(true)
      setCurParentKey(key[key.length - 1])
      setCheckedKeys([key[key.length - 2]])
      return
    }
    setIsSelectParent(false)
    // 情况三：正常选择，由于需要改为单选，但参数返回的数据会记录之前一次的选择，所以需要处理
    if (e.halfCheckedKeys.length === 1) {
      setCurParentKey(e.halfCheckedKeys[0]);
      setCheck(e.node.title);
    } else {
      // 半选节点（halfCheckedKeys）是按顺序的，所以这样处理
      for (let item of e.halfCheckedKeys) {
        if (item !== curParentKey) {
          setCurParentKey(item)
          break
        }
      }
    }
    setCheckedKeys(key.length === 0 ? [] : [key[key.length - 1]])

  };
  const onbumenSelect = (selectedKeysValue, info) => {
    console.log('onSelect', info);
    setSelectedKeys(selectedKeysValue);
  };
  const bumenitems = [
    {
      key: '1',
      label: '组织架构',
      children: <Tree
        checkable
        multiple={false}
        rootStyle={{ width: '100%', height: '400px', overflow: 'auto' }}
        showIcon
        switcherIcon={<DownOutlined />}
        icon={<ApartmentOutlined style={{ color: '#00b899' }} />}
        defaultExpandAll={true}
        onCheck={onCheck}
        checkedKeys={checkedKeys}
        onSelect={onbumenSelect}
        selectedKeys={selectedKeys}

        treeData={treeData}
      />,
    },
    {
      key: '2',
      label: '当前用户所处部门',
      children: '当前用户所处部门',
    },

  ]
  const onChange = (date, dateString) => {
    console.log(date, dateString);
  };
  return (<div>
    <Button
      style={{ width: "100%", border: "1px dashed black" }}
      type="text"
      onClick={showModal}
    >

      <div style={{ display: 'flex', justifyContent: 'flex-start' }}>

        <ApartmentOutlined style={{ color: '#f0a800', marginRight: '5px', marginTop: '3px', display: curbumen === '选择部门' ? 'none' : 'inline-block' }} /> <span>{curbumen}</span>
      </div>

    </Button>
    <Modal
      width={"1000px"}
      centered
      title="选择数据"
      open={isModalOpen}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <Tabs defaultActiveKey="1" items={bumenitems} onChange={onChange} />
    </Modal>
  </div>)
}

export default SelectBumen